<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/fullpage.min.css">
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/fullpage.js"></script>
    <link rel="stylesheet" href="./css/c.css">
    <script src="./js/lunbofengzhuang.js"></script>
    <script src="./js/cartoon.js"></script>
    <script src="./js/qichelunbo.js"></script>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <script>
        $(function () {
            $('#dowebok').fullpage({
                sectionsColor: ['#1bbc9b', 'black', '#7BAABE', '#f90'],
                'navigation': true,
            });
        })
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .nav {
            position: relative !important;
            height: 120px !important;
        }

        .nav .navContent {
            margin: 0 auto;
        }

        .navContent .navleft {
            margin-top: 34px;
        }

        .boxx {
            width: 100%;
        }

        .tupian {
            width: 100%;
            height: 800px;
            position: relative;
        }

        .tupian img {
            width: 100%;
            height: 100%;

        }

        .zhuce {
            width: 40%;
            height: 70%;
            background-color: rgba(255, 255, 255, 0.6);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 10%;
        }
        .zcContent {
            width: 80%;
            height: 80%;
            margin: 10% auto;
        }
        .zcHeader {
            text-align: center;
            font-size: 30px;
            font-family: '楷体';
            margin-bottom: 30px;
        }

        input[type='text'] {
            width: 100%;
            height: 50px;
            margin-bottom: 10px;
            outline: none;
            border: none;
            color: black;
            font-size: 17px;
            font-family: '楷体';
            font-weight: 600;
            border-bottom: 1px solid rgba(0, 0, 0, 0.5);
            background-color: transparent;
            position: relative;
        }

        input[type='checkbox'] {
            width: 25px;
            height: 25px;
            vertical-align: middle;
            margin-right: 10px;
            outline: none;
        }

        .agree {
            margin-top: 15px;
            display: block;

        }

        input[type='submit'] {
            width: 100%;
            height: 50px;
            outline: none;
            color: rgba(0, 0, 0, 0.5);
            border: none;
            background-color: #EFEFF7;
            cursor: pointer;
            font-family: '楷体';
            font-size: 17px;
            font-weight: 600;
        }

        .zcFoot {
            text-align: center;
            margin-top: 25px;
            font-size: 17px;
        }

        ::-webkit-input-placeholder {
            color: rgba(0, 0, 0, 0.5);
            font-size: 17px;
            font-weight: bolder;
        }

        a {
            color: aliceblue;
        }

        body {
            font-family: '楷体';
            font-weight: 600;
            color: rgba(0, 0, 0, 0.5);
        }

        .yanzheng {
            width: 100px;
            height: 50px;
            line-height: 50px;
            display: inline-block;

            position: absolute;
            right: 0;
            top: 0;

        }

        .yanzhengBox {
            position: relative;
        }

        .judge {
            position: absolute;
            width: 200px;
            height: 30px;

            line-height: 30px;
            right: 0;
            top: 43%;
            transform: translateY(-50%);
        }

        .xingBox,
        .mingBox,
        .number {
            position: relative;
        }

        .judge::after {
            content: '';
            position: absolute;
        }

        .tubiao {
            font-family: 'icomoon';
            font-size: 17px;
            margin-right: 5px;
            vertical-align: bottom;
        }

        .wrong {
            color: mediumvioletred;
        }
        .right{
            color:mediumblue;
        }
    </style>
</head>

<body>
    <div class="boxx">
        <div class="nav">
            <div class="navContent">
                <a href="">
                    <div class="navleft"></div>
                </a>
            </div>

        </div>
        <div class="tupian">
            <img src="./images/注册页面.png" alt="">
            <div class="zhuce">
                <div class="zcContent">
                    <div class="zcHeader">注册您的Mercedes me ID</div>
                    <form action="">
                        <div class="xingBox">
                            <input type="text" placeholder="您的姓氏">
                            <span class="judge"></span>
                        </div>
                        <div class="mingBox">
                            <input type="text" placeholder="您的姓名">
                            <span class="judge"></span>
                        </div>
                        <div class="number">
                            <input type="text" placeholder="手机号码(11位)">
                            <span class="judge"></span>
                        </div>
                        <div class="yanzhengBox">
                            <input type="text" placeholder="验证码">
                            <a href=""><span class="yanzheng">发送验证码</span></a>
                        </div>
                        <span class='agree'><input type="checkbox">我已经阅读并同意 <a href="">服务协议</a> 和 <a
                                href="">隐私条款</a></span><br>
                        <input type="submit" name="" id="" value="确定">
                    </form>
                    <div class="zcFoot">
                        已经有Merceds me ID，<a href="">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="section fp-auto-height footer">
            <div class="last-footer">
                <div class="footerl">
                    <div class="fttop">
                        <ul>
                            <li>
                                <a href=""><span>隐私条款</span></a>
                            </li>
                            <li>
                                <a href=""><span>客户关怀热线</span></a>
                            </li>
                            <li>
                                <a href=""><span>网站地图</span></a>
                            </li>
                            <li>
                                <a href=""><span>法律声明</span></a>
                            </li>
                            <li>
                                <a href=""><span>环保信息查询</span></a>
                            </li>
                            <li>
                                <a href=""><span>供应商平台</span></a>
                            </li>
                            <li>
                                <a href=""><span>腾势官网</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="ftbottom">
                        <ul>
                            <li>
                                <a href=""><span>©梅赛德斯-奔驰版权所有</span></a>
                            </li>
                            <li>
                                <a href=""><span>京ICP备09046804号-2</span></a>
                            </li>
                            <li>
                                <a href=""><span>京公网安备 11010502035702号</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="footerr">
                    <ul>
                        <li><img src="./images/奔驰.png" alt="">官方在线展厅</li>
                        <li><img src="./images/微信.png" alt="">官方微信</li>
                        <li><img src="./images/天猫.png" alt="">天猫官方旗舰店</li>
                        <li><img src="./images/微博.png" alt="">官方微博</li>
                        <li><img src="./images/抖音.png" alt="">官方抖音</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        var check = document.querySelectorAll('form input')
        var checkXing = /^[\u4E00-\u9FA5]+$/;
        var checkName = /^[\u4E00-\u9FA5]+$/
        var checkPhone = /^[0-9]{11}$/
        var checkNumber = /^[0-9]{4}$/
        var judge = document.querySelectorAll('.judge')

        check[0].addEventListener('blur', function () {
            if (checkXing.test(this.value)) {
                judge[0].innerHTML = ''
                judge[0].className = 'judge'
                var span = document.createElement('span')
                span.classList.add('tubiao')
                span.innerHTML = ''
                judge[0].appendChild(span)
                judge[0].innerHTML = judge[0].innerHTML + '姓氏符合条件'
                judge[0].classList.add('right')
            }
            else {
                judge[0].innerHTML = ''
                judge[0].className = 'judge'
                var span = document.createElement('span')
                span.classList.add('tubiao')
                span.innerHTML = ''
                judge[0].appendChild(span)
                judge[0].innerHTML = judge[0].innerHTML + '姓氏不符合条件'
                judge[0].classList.add('wrong')
            }
        })
        check[1].addEventListener('blur', function () {

            if (checkName.test(this.value)) {
                judge[1].className = 'judge'
                judge[1].innerHTML = ''
                var span = document.createElement('span')
                span.classList.add('tubiao')
                span.innerHTML = ''
                judge[1].appendChild(span)
                judge[1].innerHTML = judge[1].innerHTML + '名字符合条件'
                judge[1].classList.add('right')
            } else {
                judge[1].className = 'judge'
                judge[1].innerHTML = ''
                judge[1].classList.add('wrong')
                var span = document.createElement('span')
                span.classList.add('tubiao')
                span.innerHTML = ''
                judge[1].appendChild(span)
                judge[1].innerHTML = judge[1].innerHTML + '名字不符合条件'
                judge[1].classList.add('wrong')
            }
        })
        check[2].addEventListener('blur', function () {

            if (checkPhone.test(this.value)) {
                judge[2].className = 'judge'
                judge[2].innerHTML = ''
                var span = document.createElement('span')
                span.classList.add('tubiao')
                span.innerHTML = ''
                judge[2].appendChild(span)
                judge[2].innerHTML = judge[2].innerHTML + '电话号码符合条件'
                judge[2].classList.add('right')
            } else {
                judge[2].className = 'judge'
                judge[2].innerHTML = ''
                var span = document.createElement('span')
                span.classList.add('tubiao')
                span.innerHTML = ''
                judge[2].appendChild(span)
                judge[2].innerHTML = judge[2].innerHTML + '电话不符合条件'
                judge[2].classList.add('wrong')
            }
        })



    </script>

</body>

</html>